<template>
  <div class="app-mian-tku">
    <el-card class="is-always-shadow">
      <!-- 头部信息 新增按钮 -->
      <div slot="header" class="clearfix">
        <span style="font-size: 12px; color: pink"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          style="float: right; padding: 3px 0"
          class="success-btn"
          type="success"
          @click="$router.push('/questions/new/')"
        >
          <i class="el-icon-edit"></i>新增试题</el-button
        >
      </div>
      <!-- 搜索筛选区域 -->
      <div style="overflow: hidden">
        <el-form
          ref="formlist"
          :inline="true"
          label-position="right"
          width="100%"
          label-width="80px"
          :model="fromfilter"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  @change="changeSubject"
                  v-model="fromfilter.subjectID"
                >
                  <el-option
                    v-for="item in subject"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  v-model="fromfilter.catalogID"
                >
                  <el-option
                    v-for="item in catalog"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  v-model="fromfilter.tags"
                >
                  <el-option
                    v-for="item in tags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="关键字">
                <el-input
                  style="width: 320px"
                  size="small"
                  placeholder="根据题干搜索"
                  v-model="fromfilter.keyword"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <!-- 2行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  v-model="fromfilter.questionType"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  v-model="fromfilter.difficulty"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  v-model="fromfilter.direction"
                >
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  style="width: 320px"
                  size="small"
                  placeholder="请选择"
                  v-model="fromfilter.creatorID"
                >
                  <el-option
                    v-for="item in creator"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 3行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  style="width: 320px"
                  size="small"
                  v-model="fromfilter.remarks"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  style="width: 320px"
                  size="small"
                  v-model="fromfilter.shortName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div style="overflow: hidden">
                <el-form-item label="城市">
                  <el-select
                    style="float: left; width: 160px"
                    size="small"
                    placeholder="请选择"
                    @change="changeProvinces"
                    v-model="fromfilter.provinces"
                  >
                    <el-option
                      v-for="(item, index) in provinces"
                      :key="index"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select
                    style="float: right; width: 150px"
                    size="small"
                    placeholder="请选择"
                    v-model="fromfilter.citys"
                  >
                    <el-option
                      v-for="(item, index) in citys"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item style="float: right">
                <el-button
                  size="small"
                  style="position: relative; right: -8px"
                  @click="reset"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  style="position: relative; right: -8px"
                  @click="seachbtn"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- tabs 切换区域 -->
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleclicktab(activeName)"
      >
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <!-- 警告 -->
      <el-alert type="info" show-icon style="margin-bottom: 15px">
        <template #title>
          <span>数据一共 {{ total }} 条</span>
        </template>
      </el-alert>
      <!-- 表格内容 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="120"
          :formatter="tixing"
        ></el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template #default="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="80"
          :formatter="nandu"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="120"
          :formatter="chktype"
        >
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="150"
          :formatter="publishtype"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="{ row }">
            <el-button @click="preview(row)" type="text" size="small">预览</el-button>
            <el-button type="text" size="small" @click="handleshenhe(row)" :disabled="row.chkState!==0">审核</el-button>
            <el-button type="text" size="small" :disabled="row.publishState===1" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" size="small" @click="sjbtn(row)">{{row.publishState===1?'下架':'上架'}}</el-button>
            <el-button type="text" size="small" @click="delbtn(row)" :disabled="row.publishState===1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改dialo -->
      <el-dialog title="提示" :visible.sync="shenheVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item prop="chkState">
            <el-radio-group v-model="form.chkState">
              <el-radio label="1">通过</el-radio>
              <el-radio label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="chkRemarks">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.chkRemarks"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="shenheVisible = false">取 消</el-button>
          <el-button type="primary" @click="savebtn"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 底部分页 -->
      <el-pagination
        background
        style="float: right; padding-top: 20px"
        layout="prev, pager, next, sizes,jumper"
        :page-sizes="sizes"
        :page-size="fromfilter.pagesize"
        :total="total"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%">
      <div>
        <el-row style="margin-bottom: 15px">
          <el-col :span="6"
            ><div class="grid-list">
              【题型】：<span>{{ tixing1 }}题</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-list">
              【编号】：<span>{{ id }}</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-list">
              【难度】：<span>{{ nandu1 }}</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-list">
              【标签】：<span>{{ biaoqian }}</span>
            </div></el-col
          >
        </el-row>
        <el-row style="margin-bottom: 15px">
          <el-col :span="6"
            ><div class="grid-list">
              【学科】：<span>{{ xueke }}</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-list">
              【目录】：<span>{{ mulu }}</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-list">
              【方向】：<span>{{ fangxiang }}</span>
            </div></el-col
          >
        </el-row>
        <hr />
        <p>【题干】：</p>
        <div style="margin-bottom: 15px; color: blue" v-html="tigan"></div>
        <div class="t1"></div>
        <div class="t2"></div>
        <div class="t3" v-if="tixing1 != '简答'">
          <div style="margin-bottom: 15px">
            <span>{{ tixing1 }}</span
            >题&nbsp; 选项：（以下选中的选项为正确答案）
          </div>
          <div class="Radio" v-if="tixing1 === '单选'">
            <el-radio-group v-model="radio">
              <el-radio
                v-for="item in selecList"
                :label="item.title"
                :key="item.id"
                >{{ item.code }}&nbsp;&nbsp;{{ item.title }}</el-radio
              >
            </el-radio-group>
          </div>
          <div class="Checkbox" v-if="tixing1 === '多选'">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in selecList"
                :label="item.title"
                :key="item.id"
                >{{ item.code }}&nbsp;&nbsp;{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <hr />
        <div>
          【参考答案】：<el-button
            type="success"
            style="color: #fff; background-color: #f56c6c"
            @click="showVideo = true"
            >视频答案预览</el-button
          >
        </div>
        <video width="320" height="240" controls v-if="showVideo && shipin" autoplay>
          <source :src="shipin" type="video/mp4" />
        </video>
        <hr />
        <div style="margin-bottom: 15px">
          【答案解析】：<span v-html="daan"></span>
        </div>
        <hr />
        <div style="margin-bottom: 15px">
          【题目备注】：<span>{{ beizu }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false;showVideo = false"
          size="small"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 获取精选题列表的数据

import { choice, detail, remove, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'
// 获取城市数据 搜索框中的选项
import { provinces, citys } from '@/api/hmmm/citys.js'
// 学科 搜索框中的选项
import { subjectsSimple } from '@/api/hmmm/subjects.js'
// 录入人的数据 搜索框中的选项
import { userSimple } from '@/api/base/users'
// select 难度，试题类型和方向的选项
import {
  questionType,
  difficulty,
  direction,
  chkType1,
  publishType1
} from '@/api/hmmm/constants.js'
// 通过学科的ID获取二级目录的数据
import { directoryssimple } from '@/api/hmmm/directorys'
// 通过学科的ID获取标签的数据
import { tagssimple } from '@/api/hmmm/tags'
export default {
  created() {
    this.choicelist()
  },
  data() {
    return {
      fromfilter: {
        subjectID: '', // 学科--显示的是Id
        catalogID: '', // 目录--显示的是Id
        tags: '', // 标签
        keyword: '', // 关键字--- 同样在搜索区域
        questionType: '', // 试题类型-显示的是数字1,2,3
        difficulty: '', // 难度-显示的是数字1,2,3
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注-- 同样在搜索区域
        shortName: '', // 企业简称-- 同样在搜索区域
        provinces: '', // 城市
        citys: '', // 区
        page: 1, // 每页
        pagesize: 5 // 每页显示的数据条数
      },
      subject: [], // 学科
      catalog: [], // 目录
      tags: [], // 标签
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      creator: [], // 录入人
      provinces: [], // 城市
      citys: [], // 区
      total: null, // 数据总条数
      sizes: [5, 10, 20, 50], // 可选每页数据条数
      currentPage: 1, // 跳转的页
      activeName: 'first',
      tableData: [],

      dialogVisible: false,
      showVideo: false,
      tixing1: '',
      id: '',
      nandu1: '',
      biaoqian: '',
      xueke: '',
      mulu: '',
      fangxiang: '',
      tigan: '',
      shipin: '',
      daan: '',
      beizu: '',
      checkList: [], // 默认选中多选按钮
      radio: '', // 默认选中单选按钮
      selecList: [],
      shenheVisible: false,
      form: {
        // 审核
        chkRemarks: '',
        chkState: '1',
        id: ''
      },
      rules: { chkRemarks: [{ required: true, message: '请输入内容', trigger: 'blur' }] }
    }
  },
  methods: {
    async choicelist() {
      const { data: res } = await choice({
        page: this.fromfilter.page,
        pagesize: this.fromfilter.pagesize
      })
      console.log('精选列表', res)
      this.tableData = res.items
      console.log('tabel数据', this.tableData)
      this.total = res.counts
      // 城市选择
      this.provinces = await provinces()
      const { data } = await subjectsSimple()
      this.subject = data
      // 录入人
      const { data: res2 } = await userSimple()
      this.creator = res2
    },
    // 市区选择
    changeProvinces(res) {
      this.citys = citys(res)
    },
    // 学科选择 目录和标签获取数据
    async changeSubject() {
      const mulu = await directoryssimple({
        subjectID: this.fromfilter.subjectID
      })
      this.catalog = mulu.data
      const tags = await tagssimple({ subjectID: this.fromfilter.subjectID })
      this.tags = tags.data
    },
    // 重置
    reset() {
      this.fromfilter = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '',
        shortName: '', // 企业简称
        provinces: '',
        citys: '',
        tableData: ''
      }
    },
    // 搜索
    async seachbtn() {
      if (this.fromfilter.subjectID !== '') {
        const { data: res } = await choice({
          page: this.fromfilter.page,
          pagesize: this.fromfilter.pagesize,
          subjectID: this.fromfilter.subjectID
        })
        this.tableData = res.items
        this.total = res.counts
      } else {
        return alert('内容不能为空')
      }
    },
    // tabs栏切换
    async handleclicktab(value) {
      if (value === 'first') {
        this.choicelist()
      }
      if (value === 'second') {
        const { data: res } = await choice({
          page: this.fromfilter.page,
          pagesize: this.fromfilter.pagesize,
          chkState: 0
        })
        this.tableData = res.items
        this.total = res.counts
      }
      if (value === 'third') {
        const { data: res } = await choice({
          page: this.fromfilter.page,
          pagesize: this.fromfilter.pagesize,
          chkState: 1
        })
        this.tableData = res.items
        this.total = res.counts
      }
      if (value === 'fourth') {
        const { data: res } = await choice({
          page: this.fromfilter.page,
          pagesize: this.fromfilter.pagesize,
          chkState: 2
        })
        this.tableData = res.items
        this.total = res.counts
      }
    },
    //  预览
    async preview(row) {
      try {
        console.log(row)
        const { data } = await detail(row)
        // 选项排序
        const compare = function (prop) {
          return function (obj1, obj2) {
            const val1 = obj1[prop]
            const val2 = obj2[prop]
            if (val1 < val2) {
              return -1
            } else if (val1 > val2) {
              return 1
            } else {
              return 0
            }
          }
        }
        this.selecList = data.options.sort(compare('code'))
        // 默认选中 ispriht
        this.radio = data.options.find((item) => item.isRight === 1).title
        const checks = data.options.filter((item) => item.isRight === 1)
        checks.forEach((item) => {
          this.checkList.push(item.title)
        })
        // console.log(111, this.checkList)
        // console.log('返回的数据', this.selecList)
        // console.log('每行的数据', row)
        const obj = questionType.find(
          (item) => `${item.value}` === row.questionType
        )
        // 可以用一个空对象来接收
        this.tixing1 = obj.label
        this.id = row.id
        this.nandu1 = difficulty.find(
          (item) => `${item.value}` === row.difficulty
        ).label
        this.biaoqian = row.tags
        this.xueke = row.subject
        this.mulu = row.catalog
        this.fangxiang = row.direction
        this.tigan = row.question
        this.shipin = row.videoURL
        this.daan = row.answer
        this.beizu = row.remarks
        this.dialogVisible = true
      } catch (error) {
        console.log(error)
      }
    },
    // 审核
    handleshenhe(row) {
      this.form.id = row.id
      this.shenheVisible = true
    },
    // 审核确定
    async  savebtn() {
      this.$refs.form.validate()
      try {
        if (this.form.chkState === '1') {
          await choiceCheck({ id: this.form.id, chkState: 1, chkRemarks: this.form.chkRemarks })
        } else {
          console.log(2)
          await choiceCheck({ id: this.form.id, chkState: 2, chkRemarks: this.form.chkRemarks })
        }

        this.choicelist()
        this.shenheVisible = false
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    handleEdit(row) {
      console.log(row.id)
      this.$router.push('/questions/new/?' + { id: row.id })
    },
    // 发布上架
    async  sjbtn(value) {
      console.log(value)
      if (value.publishState === 1) {
        this.$confirm('是否上架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({ id: value.id, publishState: 0 })
            this.$message({
              type: 'success',
              message: '上架成功'
            })
            this.choicelist()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '用户已取消操作'
            })
          })
      } else {
        this.$confirm('是否下架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({ id: value.id, publishState: 1 })
            this.$message({
              type: 'success',
              message: '下架成功'
            })
            this.choicelist()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '用户已取消操作'
            })
          })
      }
    },
    // 删除
    async delbtn(row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.choicelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '用户已取消删除'
          })
        })
    },

    // formatter
    tixing(row) {
      const obj = questionType.find(
        (item) => `${item.value}` === row.questionType
      )
      if (obj) {
        return obj.label
      } else {
        return '其他'
      }
    },
    nandu(row) {
      const obj = difficulty.find((item) => `${item.value}` === row.difficulty)
      if (obj) {
        return obj.label
      } else {
        return '其他'
      }
    },
    chktype(row) {
      const obj = chkType1.find((item) => item.value === row.chkState)

      if (obj) {
        return obj.label
      } else {
        return '其他'
      }
    },
    publishtype(row) {
      const objchktype = chkType1.find((item) => item.value === row.chkState)
      if (objchktype.label === '已通过') {
        const obj = publishType1.find(
          (item) => item.value === row.publishState
        )
        if (obj) {
          return obj.label
        }
      } else {
        return '待发布'
      }
    },
    // 分页当前页
    handleCurrentChange(current) {
      this.fromfilter.page = current
      this.choicelist()
    },
    // 每页条数
    handleSizeChange(size) {
      this.fromfilter.pagesize = size
      this.choicelist()
    }
  }
}
</script>

<style scoped lang="scss">
.app-mian-tku {
  margin: 10px 0;
  padding: 0 10px;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  .el-card {
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;

    ::v-deep .el-card__header {
      border-bottom: 0;
      padding: 0;
      margin-bottom: 15px;

      .success-btn {
        border-radius: 3px;
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
        padding: 9px 15px !important;
        font-size: 12px;
      }
    }
    ::v-deep .el-card__body {
      padding: 0;
    }
    .el-button--small.is-circle {
      padding: 9px;
    }
    ::v-deep .has-gutter tr th {
      background: rgb(243, 246, 251);
      color: rgb(102, 102, 102);
      font-size: 14px;
    }
    .el-table .cell {
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      padding-right: 10px;
    }
    ::v-deep .el-pagination__jump {
      margin-left: 0;
    }
  }
  .is-always-shadow {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
